import React from 'react';
import {injectIntl} from './intl';
import PropTypes from 'prop-types';
import {Form, Row, Modal, message, Col} from 'antd';
import TextInput from 'Shared/components/TextInput';
const FormItem = Form.Item;
const autosize = {minRows: 1};
import {validateAdd} from './utils';
const formItemL = {
    labelCol: {
        xxl: {span: 7},
        xl: {span: 10},
        md: {span: 9}
    },
    wrapperCol: {
        xxl: {span: 17},
        xl: {span: 14},
        md: {span: 15}
    }
};
const formItemR = {
    labelCol: {
        xxl: {span: 5},
        xl: {span: 10},
        md: {span: 9}
    },
    wrapperCol: {
        xxl: {span: 19},
        xl: {span: 24},
        md: {span: 15}
    }
};
const formColL = {
    xl: 8,
    md: 12
};
const formColR = {
    xl: 16,
    md: 12
};
class ModeEdit extends React.PureComponent {
    static getDerivedStateFromProps(props, state) {
        if(state.isDefault && props.showPanel)
            return {
                code: props.detail.code,
                name: props.detail.name,
                description: props.detail.description,
                rowVersion: props.detail.rowVersion,
                id: props.detail.id,
                isDefault: false,
                enName: props.detail.enName,
                esName: props.detail.esName,
                ptName: props.detail.ptName,
                ruName: props.detail.ruName,
                arName: props.detail.arName,
                faName: props.detail.faName,
                enDescription: props.detail.enDescription,
                esDescription: props.detail.esDescription,
                ptDescription: props.detail.ptDescription,
                ruDescription: props.detail.ruDescription,
                arDescription: props.detail.arDescription,
                faDescription: props.detail.faDescription,
            };
        if(!props.showPanel)
            return {
                loading: false,
                id: '',
                code: '',
                name: '',
                rowVersion: '',
                description: '',
                isDefault: true,
                isValidate: false,
                enName: '',
                esName: '',
                ptName: '',
                ruName: '',
                arName: '',
                faName: '',
                enDescription: '',
                esDescription: '',
                ptDescription: '',
                ruDescription: '',
                arDescription: '',
                faDescription: '',
            };
        return null;
    }
    state = {
        loading: false,
        id: '',
        code: '',
        name: '',
        rowVersion: '',
        description: '',
        enName: '',
        esName: '',
        ptName: '',
        ruName: '',
        arName: '',
        faName: '',
        enDescription: '',
        esDescription: '',
        ptDescription: '',
        ruDescription: '',
        arDescription: '',
        faDescription: '',
        isDefault: true
    };
    componentDidMount() {
        this.ismounted = true;
    }

    componentWillUnmount() {
        this.ismounted = false;
        Modal.destroyAll();
    }

    handleFilterChange = (value, name) => {
        this.setState({
            [name]: value
        });
    }

    onCancel = () => {
        this.setState({
            code: '',
            name: '',
            rowVersion: '',
            description: '',
            id: '',
            enName: '',
            esName: '',
            ptName: '',
            ruName: '',
            arName: '',
            faName: '',
            enDescription: '',
            esDescription: '',
            ptDescription: '',
            ruDescription: '',
            arDescription: '',
            faDescription: '',
            isValidate: false,
        });
    }
    onSubmit = () => {
        const {name, description, code, id, rowVersion, enName, esName, ptName, ruName, arName, faName,
            enDescription,
            esDescription,
            ptDescription,
            ruDescription,
            arDescription,
            faDescription} = this.state;
        const result = validateAdd(this.state);
        if(result) {
            this.setState({
                isValidate: true,
            });
            return message.warn(result);
        }

        this.setState({
            loading: true
        });
        return this.props.onSubmit({
            id,
            name,
            code,
            enName,
            esName,
            ptName,
            ruName,
            arName,
            faName,
            description,
            enDescription,
            esDescription,
            ptDescription,
            ruDescription,
            arDescription,
            faDescription,
            rowVersion
        }).then(() => {
            this.setState({
                loading: false,
            });
        });
    }
    render() {
        return (
            <div>
                <Modal
                    title={this.state.id ? this.props.intl.formatMessage({
                        id: 'modeEdit.modale.edit.title',
                        defaultMessage: '编辑故障代码'
                    }) : this.props.intl.formatMessage({
                        id: 'modeEdit.modale.add.title',
                        defaultMessage: '新增故障代码'
                    })}
                    width="70%"
                    maskClosable={false}
                    onOk={this.onSubmit}
                    destroyOnClose={true}
                    confirmLoading={this.state.loading}
                    visible={this.props.showPanel}
                    onCancel={this.props.onCancel}>
                    <Form className="form-standard">
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.code',
                                        defaultMessage: '编号'
                                    })}
                                    validateStatus={!this.state.id && this.state.isValidate && !this.state.code ? 'error' : null}
                                    required={!this.state.id}
                                    {...formItemL}>
                                    {this.state.id ? this.state.code
                                        : <TextInput name="code"
                                            value={this.state.code} onBlur={this.handleFilterChange} />}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.name ? 'error' : null}
                                    required
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.name',
                                        defaultMessage: '名称'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="name"
                                        value={this.state.name} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.description',
                                        defaultMessage: '描述'
                                    })}
                                    {...formItemR}>
                                    <TextInput type="textarea" name="description" autosize={autosize}
                                        value={this.state.description} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.enName ? 'error' : null}
                                    required
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.enName',
                                        defaultMessage: '英文名称'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="enName"
                                        value={this.state.enName} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.enDescription',
                                        defaultMessage: '英文描述'
                                    })}
                                    {...formItemR}>
                                    <TextInput type="textarea" name="enDescription" autosize={autosize}
                                        value={this.state.enDescription} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.esName ? 'error' : null}
                                    required
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.esName',
                                        defaultMessage: '西班牙语名称'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="esName"
                                        value={this.state.esName} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.esDescription',
                                        defaultMessage: '西班牙语描述'
                                    })}
                                    {...formItemR}>
                                    <TextInput type="textarea" name="esDescription" autosize={autosize}
                                        value={this.state.esDescription} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.ptName ? 'error' : null}
                                    required
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.ptName',
                                        defaultMessage: '葡萄牙语名称'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="ptName"
                                        value={this.state.ptName} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.ptDescription',
                                        defaultMessage: '葡萄牙语描述'
                                    })}
                                    {...formItemR}>
                                    <TextInput type="textarea" name="ptDescription" autosize={autosize}
                                        value={this.state.ptDescription} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.ruName ? 'error' : null}
                                    required
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.ruName',
                                        defaultMessage: '俄罗斯语名称'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="ruName"
                                        value={this.state.ruName} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.ruDescription',
                                        defaultMessage: '俄罗斯语描述'
                                    })}
                                    {...formItemR}>
                                    <TextInput type="textarea" name="ruDescription" autosize={autosize}
                                        value={this.state.ruDescription} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.arName ? 'error' : null}
                                    required
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.arName',
                                        defaultMessage: '阿拉伯语名称'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="arName"
                                        value={this.state.arName} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.arDescription',
                                        defaultMessage: '阿拉伯语描述'
                                    })}
                                    {...formItemR}>
                                    <TextInput type="textarea" name="arDescription" autosize={autosize}
                                        value={this.state.arDescription} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col {...formColL}>
                                <FormItem
                                    validateStatus={this.state.isValidate && !this.state.faName ? 'error' : null}
                                    required
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.faName',
                                        defaultMessage: '波斯语名称'
                                    })}
                                    {...formItemL}>
                                    <TextInput name="faName"
                                        value={this.state.faName} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                            <Col {...formColR}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'modeEdit.modale.form.faDescription',
                                        defaultMessage: '波斯语描述'
                                    })}
                                    {...formItemR}>
                                    <TextInput type="textarea" name="faDescription" autosize={autosize}
                                        value={this.state.faDescription} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            </div>
        );
    }
}

ModeEdit.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    showPanel: PropTypes.bool,
    onCancel: PropTypes.func,
    onSubmit: PropTypes.func
};
export default injectIntl(ModeEdit);
